<template>
    <div class="page-box">
        <!-- <breadcrumb id="breadcrumb-container" class="breadcrumb-container" /> -->
        <div class="app-container">
            <div class="filter-container">
                <el-form :inline="true" class="demo-form-inline" label-position="left">
                    <el-form-item label="地市名称" label-width="90px">
                        <el-select v-model="search.cityCode" placeholder="请选择" :disabled="disabled" clearable>
                            <el-option :label="item.label" :value="item.label" v-for="item, i in options"
                                :key="i"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="单位名称" label-width="70px">
                        <el-input v-model="search.companyName" placeholder="请输入" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="服务商" label-width="80px">
                        <el-select v-model="search.providerType" placeholder="请选择" clearable>
                            <el-option label="移动" value="移动"></el-option>
                            <el-option label="联通" value="联通"></el-option>
                            <el-option label="电信" value="电信"></el-option>
                            <el-option label="华为" value="华为"></el-option>
                            <el-option label="浪潮" value="浪潮"></el-option>
                            <el-option label="未招标" value="未招标"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="调度次数" label-width="70px">
                        <el-input v-model="search.recordTimes" placeholder="请输入" clearable></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">查询</el-button>
                        <el-button @click="reset">重置</el-button>
                        <!-- <el-button type="primary" @click="down">导出</el-button> -->
                    </el-form-item>
                </el-form>
            </div>

            <el-table :key="tableKey" v-loading="listLoading" :data="list" border fit style="width: 100%;"
                :height="height + 'px'">
                <el-table-column label="地市名称" align="center" v-element-table-tooltip>
                    <template slot-scope="{row}">
                        <span>{{ row.cityCode }}</span>
                    </template>
                </el-table-column>
                <!-- <el-table-column label="区县名称" align="center" v-element-table-tooltip>
                    <template slot-scope="{row}">
                        <span>{{ row.districtName }}</span>
                    </template>
                </el-table-column> -->
                <!-- <el-table-column label="市县乡村四级分类" align="center" v-element-table-tooltip>
                    <template slot-scope="{row}">
                        <span>{{ row.fourLevelClassify }}</span>
                    </template>
                </el-table-column> -->
                <el-table-column label="单位名称" align="center" v-element-table-tooltip>
                    <template slot-scope="{row}">
                        <span>{{ row.companyName }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="项目名称" align="center" v-element-table-tooltip>
                    <template slot-scope="{row}">
                        <span>{{ row.projectName }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="服务商" align="center" v-element-table-tooltip>
                    <template slot-scope="{row}">
                        <span>{{ row.providerType }}</span>
                    </template>
                </el-table-column>
                <!-- <el-table-column label="合同起止时间" align="center" v-element-table-tooltip>
                    <template slot-scope="{row}">
                        <span>{{ row.contractTime }}</span>
                    </template>
                </el-table-column>  -->
                <el-table-column label="合同开始时间" align="center" v-element-table-tooltip>
                    <template slot-scope="{row}">
                        <span>{{ row.contractBeginTime }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="合同结束时间" align="center" v-element-table-tooltip>
                    <template slot-scope="{row}">
                        <span>{{ row.contractEndTime }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="备注" align="center" v-element-table-tooltip>
                    <template slot-scope="{row}">
                        <span>{{ row.addRemark }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="调度次数" align="center" width="80px">
                    <template slot-scope="{row}">
                        <span>{{ row.recordTimes || 0 }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" width="100px">
                    <template slot-scope="{row}">
                        <el-button @click="goOkr(row)" type="text">调度</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination v-show="total > 0" :total="total" :page.sync="pagination.pageNum"
                :limit.sync="pagination.pageSize" @pagination="getPagination" />
        </div>
    </div>
</template>

<script>
import { selectCloudComplete } from '@/api/api'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import Breadcrumb from '@/components/Breadcrumb'
import moment from 'moment'
import store from '@/store'
import qs from 'querystring'
let query;
export default {
    name: 'warnTableCloud',
    components: { Breadcrumb, Pagination },
    data() {
        return {
            cityName: localStorage.getItem('cityName').replace('市', ''),
            disabled: true,
            height: 600,
            tableKey: 0,
            list: null,
            total: 0,
            listLoading: true,
            search: {},
            options: [{
                value: '0',
                label: '省本级'
            }, {
                value: '30182',
                label: '哈尔滨'
            }, {
                value: '30183',
                label: '齐齐哈尔'
            }, {
                value: '30184',
                label: '牡丹江'
            }, {
                value: '30185',
                label: '佳木斯'
            }, {
                value: '30186',
                label: '大庆'
            }, {
                value: '30187',
                label: '伊春'
            }, {
                value: '30188',
                label: '鸡西'
            }, {
                value: '30189',
                label: '鹤岗'
            }, {
                value: '30190',
                label: '双鸭山'
            }, {
                value: '30191',
                label: '‌七台河'
            }, {
                value: '30192',
                label: '绥化'
            }, {
                value: '30193',
                label: '黑河'
            }, {
                value: '30194',
                label: '大兴安岭'
            }],
            pagination: {
                "pageNum": 1,
                "pageSize": 20
            },
        }
    },
    created() {
        this.disabled = this.cityName !== '黑龙江省'
        query = this.$route.query;
        this.search = { cityCode: this.cityName == '黑龙江省' ? '' : this.cityName, ...query };
        this.getList();
        this.height = this.getHeight();
        let that = this;
        window.onresize = function (event) {
            that.height = that.getHeight();
        };
    },
    methods: {
        down() {
            let params = { ...this.search, filterByContractEndTime: true }
            // window.open(`${process.env.NODE_ENV === 'development' ? '/dev-api' : ''}/api/tasks/export?${qs.stringify(params)}`)
        },
        goOkr(item) {
            this.$router.push({ name: 'superviseListSend', params: { add: true, content: `${item.cityCode + item.companyName + item.projectName + '，' + (item.providerType.indexOf('移动') > -1 ? '需续约' : '需策反')}`, from: 'cloudSj', detail: item } })
        },
        getHeight() {
            let winHieght = window.innerHeight;
            return winHieght - 250;
        },
        getPagination(pagination) {
            this.pagination = pagination;
            this.getList();
        },
        goDetail(row) {
            window.top.postMessage(
                JSON.stringify({
                    to: 'portal',
                    action: 'open',
                    pathname: `/iframe/PROJECT_MENU_MY_PROJECT_PROJECTFULLVIEW?uniqueProjectInstId=${row.UniqueProjectInstId}&bupMenuNo=${row.bupMenuNo}&tableRecord=${row.tableRecord}`,
                }),
                '*'
            )
        },
        onSubmit() {
            this.pagination = {
                "pageNum": 1,
                "pageSize": 20
            }
            this.getList();
        },
        reset() {
            this.pagination = {
                "pageNum": 1,
                "pageSize": 20
            }
            this.search = {};
            this.getList();
        },
        getNumW(num) {
            return this.truncateToFixed(num / 10000, 2)
        },
        truncateToFixed(value, decimals) {
            const integerPart = Math.trunc(value); // 获取整数部分
            const decimalPart = value - integerPart; // 获取小数部分
            const factor = Math.pow(10, decimals);
            const truncatedDecimalPart = decimalPart < 0 ? Math.ceil(decimalPart * factor) / factor : Math.floor(decimalPart * factor) / factor; // 根据正负选择向上或向下截断
            return integerPart + truncatedDecimalPart; // 组合整数部分和小数部分
        },
        getList() {
            this.listLoading = true;
            try {
                let param = {
                    ...this.search,
                    page: this.pagination.pageNum,
                    size: this.pagination.pageSize,
                    filterByContractEndTime: true
                }
                selectCloudComplete(param).then(response => {
                    this.list = response.list || []
                    this.total = response.total || 0
                    this.listLoading = false
                }).finally(e => {
                    this.listLoading = false
                })
            } catch (error) {
                console.log('error', error)
                this.listLoading = false
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.page-box {
    background: #fff;
}

::v-deep .el-form-item {
    margin-bottom: 10px;
    margin-right: 20px;
}

::v-deep .el-table th {
    color: #000;
}

::v-deep .el-select--medium {
    min-width: 240px;
}

::v-deep .el-form-item--medium .el-form-item__content {
    min-width: 240px;
}

::v-deep .el-date-editor--daterange.el-input__inner {
    width: 240px;
}

::v-deep .el-select {
    width: 100%;
}
</style>